<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - SelectField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<p class='demoTitle'>inputEx - SelectField Usage</p>


<!-- Example 1 -->
<div class='exampleDiv'>

	<p class="title">Basic SelectField creation</p>
	
	<p>Use the following code to create a basic inputEx SelectField.</p>

	<div class='demoContainer' id='container1'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			new inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: 'container1'});
		</textarea>
			</div>

</div>



<!-- Example 2 -->
<div class='exampleDiv'>

	<p class="title">Updated event</p>
	
	<p>How to listen to the updated event :</p>

	<div class='demoContainer' id='container2'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			var el = YAHOO.util.Dom.get('container2');
			var field = new YAHOO.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: el});
			var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
			el.appendChild(logDiv);
			field.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value+"<br />";
			});
		</textarea>
			</div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

	<p class="title">addOption</p>
	
	<p>Add options dynamically</p>

	<div class='demoContainer' id='container3'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
         var button1 = YAHOO.inputEx.cn('button', null, null, "Add 'Spain' option (and select 'Spain')");
         YAHOO.util.Event.addListener(button1, "click" ,function() {
            field3.addOption({value:"Spain",selected:true});
         });

         var button2 = YAHOO.inputEx.cn('button', null, null, "Add 'United Kingdom' option (value : 'uk'), in position 1");
         YAHOO.util.Event.addListener(button2, "click" ,function() {
            field3.addOption({value:"uk",option:"United Kingdom",position:1});
         });

         var button3 = YAHOO.inputEx.cn('button', null, null, "Add 'Sweden' option after 'France' option");
         YAHOO.util.Event.addListener(button3, "click" ,function() {
            field3.addOption({value:"Sweden",after:"France"});
         });
		</textarea>
	</div>

</div>

<!-- Example 4 -->
<div class='exampleDiv'>

	<p class="title">removeOption</p>
	
	<p>Remove options dynamically</p>

	<div class='demoContainer' id='container4'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
      	var field4 = new YAHOO.inputEx.SelectField({
      	   name: 'country',
      	   selectOptions: ['United States of America','Germany','United Kingdom','France','Sweden','Spain'],
      	   selectValues: ['usa','de','uk','fr','se','es'],
      	   parentEl: el
      	});

      	var button4 = YAHOO.inputEx.cn('button', null, null, "Remove 'Spain' option (by option text)");
      	YAHOO.util.Event.addListener(button4, "click" ,function() {
      	   field4.removeOption({option:"Spain"});
      	});

      	var button5 = YAHOO.inputEx.cn('button', null, null, "Remove 'United Kingdom' option (by value)");
      	YAHOO.util.Event.addListener(button5, "click" ,function() {
      	   field4.removeOption({value:"uk"});
      	});

      	var button6 = YAHOO.inputEx.cn('button', null, null, "Remove option by position (position = 1)");
      	YAHOO.util.Event.addListener(button6, "click" ,function() {
      	   field4.removeOption({position:1});
      	});
		</textarea>
	</div>

</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>

<script>

YAHOO.util.Event.addListener(window, 'load', function() {

	// Example 1
	new YAHOO.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: 'container1'});
	
	
	// Example 2
	var el = YAHOO.util.Dom.get('container2');
	var field2 = new YAHOO.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: el});

	var button = YAHOO.inputEx.cn('button', null, null, "SetValue with 'United States of America'");
	var val = 'United States of America';
	el.appendChild(button);
	YAHOO.util.Event.addListener(button, "click" ,function() {
	   field2.setValue(val);
	   val = (val == 'France') ? 'United States of America' : 'France';
	   button.innerHTML = "SetValue with '"+val+"'";
	});
	
	var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
	el.appendChild(logDiv);
	field2.updatedEvt.subscribe(function(e,params) {
		var value = params[0];
		logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value+"<br />";
	});

	// Example 3
	var el = YAHOO.util.Dom.get('container3');
	var field3 = new YAHOO.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: el});

	var button1 = YAHOO.inputEx.cn('button', null, null, "Add 'Spain' option (and select 'Spain')");
	YAHOO.util.Event.addListener(button1, "click" ,function() {
	   field3.addOption({value:"Spain",selected:true});
	   button1.disabled = true;
	});
	
	var button2 = YAHOO.inputEx.cn('button', null, null, "Add 'United Kingdom' option (value : 'uk'), in position 1");
	YAHOO.util.Event.addListener(button2, "click" ,function() {
	   field3.addOption({value:"uk",option:"United Kingdom",position:1});
	   button2.disabled = true;
	});
	
	var button3 = YAHOO.inputEx.cn('button', null, null, "Add 'Sweden' option after 'France' option");
	YAHOO.util.Event.addListener(button3, "click" ,function() {
	   field3.addOption({value:"Sweden",after:"France"});
	   button3.disabled = true;
	});

	el.appendChild(button1);
	el.appendChild(button2);
	el.appendChild(button3);
	
	var logDiv3 = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
	el.appendChild(logDiv3);
	field3.updatedEvt.subscribe(function(e,params) {
		var value = params[0];
		logDiv3.innerHTML += "Updated at "+(new Date())+" with value "+value+"<br />";
	});
	
		
	// Example 4
	var el = YAHOO.util.Dom.get('container4');
	var field4 = new YAHOO.inputEx.SelectField({
	   name: 'country',
	   selectOptions: ['United States of America','Germany','United Kingdom','France','Sweden','Spain'],
	   selectValues: ['usa','de','uk','fr','se','es'],
	   parentEl: el
	});

	var button4 = YAHOO.inputEx.cn('button', null, null, "Remove 'Spain' option (by option text)");
	YAHOO.util.Event.addListener(button4, "click" ,function() {
	   field4.removeOption({option:"Spain"});
	   button4.disabled = true;
	});
	
	var button5 = YAHOO.inputEx.cn('button', null, null, "Remove 'United Kingdom' option (by value)");
	YAHOO.util.Event.addListener(button5, "click" ,function() {
	   field4.removeOption({value:"uk"});
	   button5.disabled = true;
	});
	
	var button6 = YAHOO.inputEx.cn('button', null, null, "Remove 'Germany' option (by position)");
	YAHOO.util.Event.addListener(button6, "click" ,function() {
	   field4.removeOption({position:1});
	   button6.disabled = true;
	});
	
	el.appendChild(button4);
	el.appendChild(button5);
	el.appendChild(button6);
	
	var logDiv4 = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
	el.appendChild(logDiv4);
	field4.updatedEvt.subscribe(function(e,params) {
		var value = params[0];
		logDiv4.innerHTML += "Updated at "+(new Date())+" with value "+value+"<br />";
	});
});

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

 </body>
</html>